<template>
  <el-row>
    <el-col :span="24">
      <el-radio-group
        v-model="currval"
        :disabled="
          (component ? component.disabled : formData[formKey].disabled) ||
          formData[formKey].disabled == true
            ? true
            : false
        "
        @change="$listeners.change($event)"
      >
        <el-radio-button
          v-for="item in formData[componentKey].options.slice(0, 3)"
          :key="item.attrValue"
          :label="item.attrValue"
          >{{ item.attrValueName }}</el-radio-button
        >
        <el-select
          filterable
          v-model="currval"
          placeholder="请选择"
          :disabled="
            (component ? component.disabled : formData[formKey].disabled) ||
            formData[formKey].disabled == true
              ? true
              : false
          "
          @change="$listeners.change($event)"
          @visible-change="$listeners['visible-change']($event)"
          @remove-tag="$listeners['remove-tag']($event)"
          @clear="$listeners.clear($event)"
          @focus="$listeners.focus($event)"
          @blur="$listeners.blur($event)"
        >
          <el-option label="" value=""></el-option>
          <el-option
            v-for="item in formData[componentKey].options"
            :key="item.attrValue"
            :label="item.attrValueName"
            :value="item.attrValue"
          ></el-option>
        </el-select>
      </el-radio-group>
    </el-col>
  </el-row>
</template>

<script>
import http from "../../utils/http";
export default {
  name: "SctSelect",
  props: {
    attrId: [String, Number],
    productId: [String, Number],
    value: [String, Number],
    component: {
      type: Object,
    },
    formData: {
      type: Object,
    },
    formKey: {
      type: String,
    },
  },
  created() {
    if (this.component) {
      this.componentKey =
        this.component.pageTempStructId + "-" + this.component.attrId;
    } else {
      this.componentKey = this.formKey;
    }
    this.getAttrValueList();
  },
  data() {
    return {
      options: [],
      componentKey: "",
    };
  },
  computed: {
    currval: {
      get: function () {
        return this.value;
      },
      set: function (newValue) {
        this.$emit("input", newValue);
      },
    },
  },
  methods: {
    async getAttrValueList() {
      let res = await http({
        url: `${process.env.VUE_APP_CTX_ORDER_QUERY}/qryAttrValueList`,
        params: { attrId: this.attrId, productId: this.productId },
        method: "GET",
      });
      if (res.code == 200) {
        this.formData[this.componentKey].options = res.meta.attrValueList;
      } else {
      }
    },

    // doEmit(value) {
    // 	this.$emit("change", value);
    // },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
  margin-left: -1px;
}

::v-deep .el-input__icon {
  line-height: 30px;
}
</style>
